<script setup lang="ts">
import CategoryView from '@/components/commodiity/CategoryView.vue'
import { Plus } from '@element-plus/icons-vue'
import SpuForm from '@/views/commodity/spu/SpuForm.vue'
import { ref } from 'vue'
// 控制哪个页面展示
const show = ref(2)
// 切换页面
const changeShow = () => {
  show.value = 2
}
</script>

<template>
  <div class="container">
    <!--    分类组件-->
    <CategoryView></CategoryView>
    <!--    卡片-->
    <el-card class="el-card">
      <!--      展示SPU信息-->
      <div class="el-table" v-show="show == 1">
        <el-button type="primary" :icon="Plus" @click="changeShow">添加SPU</el-button>
        <el-table class="el-table" border style="width: 100%">
          <el-table-column type="selection" width="81" align="center" />
          <el-table-column type="index" width="120" align="center" label="序号" />
          <el-table-column prop="date" width="130" label="SPU名称" />
          <el-table-column prop="name" label="SPU描述" />
          <el-table-column prop="address" width="260" label="操作" />
        </el-table>
      </div>
      <!--新增及修改SPU表单组件-->
      <div class="spu-form" v-show="show == 2 || show == 3"><SpuForm></SpuForm></div>
    </el-card>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;

  .el-card {
    .el-table {
      margin-top: 0.5rem;
    }
  }
}
</style>
